<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn" style='background:gray'>
  <head>
    <title>timeline动画编辑器</title>
    <link href="timeline.css" rel="stylesheet">
  </head>

  <body>
    <script src='timeline.min.js' type='text/javascript'></script>
    <div id='test0' style='border-radius: 5px;background:blue;left:0px;top:400px;position: absolute;width:50px;height:50px;'>123</div>
    <div id='test1' style='background:green;left:0px;top:450px;position: absolute;width:50px;height:50px;'></div>
    <div class='test2' style='background:yellow;left:0px;top:500px;position: absolute;width:50px;height:50px;'></div>
    <div class='test3' style='background:red;left:0px;top:550px;position: absolute;width:50px;height:50px;'></div>
    <audio src='1.mp3' controls id='music' style='left:0px;top:600px;position: absolute;'></audio>
    <script>
      const data = {
        timelineMessage: [{
            type: 'music',
            trackName: '10',
            trackEntity: '#test0',
            message: [{
              start: 7.6,
              duration: 2,
              value: 'music0',
              isMove: true,
              attribute: {
                value: 'currentTime',
                from: 230,
                to: 0
              }
            }, {
              start: 3,
              duration: 1,
              value: 'music1',
              isMove: false,
              attribute: {
                value: 'currentTime',
                from: 20,
                to: 100
              }
            }, {
              start: 4,
              duration: 2,
              value: 'music2',
              isMove: false,
              attribute: {
                value: 'currentTime',
                from: 100,
                to: 70
              }
            }, {
              start: 6,
              duration: 1.6,
              value: 'music3',
              isMove: true,
              attribute: {
                value: 'currentTime',
                from: 70,
                to: 230
              }
            }]
          },
          {
            type: 'animation',
            trackName: '110',
            trackEntity: '#test1',
            message: [{
              start: 7.6,
              duration: 2,
              value: 'music0',
              isMove: true,
              attribute: {
                value: 'left',
                from: '100px',
                to: '0px'
              }
            }, {
              start: 3,
              duration: 1,
              value: 'music1',
              isMove: false,
              attribute: {
                value: 'left',
                from: '500px',
                to: '100px'
              }
            }, {
              start: 4,
              duration: 2,
              value: 'music2',
              isMove: false,
              attribute: {
                value: 'left',
                from: '100px',
                to: '700px'
              }
            }, {
              start: 6,
              duration: 1.6,
              value: 'music3',
              isMove: true,
              attribute: {
                value: 'left',
                from: '700px',
                to: '230px'
              }
            }]
          },
          {
            type: 'group',
            trackName: '1110',
            trackEntity: '.test2',
            message: [{
              start: 7.6,
              duration: 2,
              value: 'music0',
              isMove: true,
              attribute: {
                value: 'left',
                from: '230px',
                to: '0px'
              }
            }, {
              start: 3,
              duration: 1,
              value: 'music1',
              isMove: false,
              attribute: {
                value: 'left',
                from: '200px',
                to: '100px'
              }
            }, {
              start: 4,
              duration: 2,
              value: 'music2',
              isMove: false,
              attribute: {
                value: 'left',
                from: '100px',
                to: '0px'
              }
            }, {
              start: 6,
              duration: 1.6,
              value: 'music3',
              isMove: true,
              attribute: {
                value: 'left',
                from: '0px',
                to: '230px'
              }
            }]
          },
          {
            type: 'texture',
            trackName: '11110',
            trackEntity: '.test3',
            message: [{
              start: 7.6,
              duration: 2,
              value: 'music0',
              isMove: true,
              attribute: {
                value: 'left',
                from: '0px',
                to: '300px'
              }
            }, {
              start: 3,
              duration: 1,
              value: 'music1',
              isMove: false,
              attribute: {
                value: 'left',
                from: '20px',
                to: '500px'
              }
            }, {
              start: 4,
              duration: 2,
              value: 'music2',
              isMove: false,
              attribute: {
                value: 'left',
                from: '500px',
                to: '70px'
              }
            }, {
              start: 6,
              duration: 1.6,
              value: 'music3',
              isMove: true,
              attribute: {
                value: 'left',
                from: '70px',
                to: '230px'
              }
            }]
          },
          {
            type: 'frame',
            trackName: '111110',
            trackEntity: '#test0',
            message: [{
              time: 2,
              value: 'frame0',
              isMove: true,
              attribute: {
                value: 'currentTime',
                from: 230,
                to: 0
              }
            }, {
              time: 1,
              value: 'frame1'
            }, {
              time: 4,
              value: 'frame2'
            }, {
              time: 5,
              value: 'frame3'
            }]
          }
        ],
        timelineSetting: {
          maxValue: 100,
          startValue: 0,
          currentValue: 0,
          color: {
            music: 'blue',
            animation: 'green',
            group: 'yellow',
            texture: 'red',
            frame: '#00ffff'
          },
          type: 'time',
          minValue: 20,
          timeNumber: 5
        }
      };
      const a = new TimeLine(data);
    </script>
  </body>
</html>